<template>
  <!-- v-lazy-container -->
  <!-- eslint-disable vue/no-v-html -->
  <component
    :is="tag"
    class="v-html"
    v-html="dealHtml"
  />
</template>

<script lang="ts">
import Vue from 'vue'
import DOMPurify from 'dompurify'
import { ImagePreview } from 'vant'
const preHooks: any = {
  afterSanitizeElements_underline (curNode: Element) {
    const style = curNode.getAttribute ? curNode.getAttribute('style') : ''
    if (style && (style.includes('text-decoration:underline;') ||
      style.includes('text-decoration: underline;'))) {
      const innerSpan = document.createElement('span')
      innerSpan.className = 'underline-innertext'
      innerSpan.innerHTML = curNode.innerHTML
      curNode.className = 'underline-span'
      curNode.innerHTML = ''
      curNode.setAttribute('style', style.replace(/text-decoration:\w*underline;/, ''))
      curNode.appendChild(innerSpan)
    }
  },
}
// DOMPurify.addHook('afterSanitizeElements', function (currentNode, data, config) {
//   if (currentNode.nodeName === 'IMG') {
//     (currentNode as HTMLImageElement).dataset.src = (currentNode as HTMLImageElement).src
//     currentNode.removeAttribute('src')
//   }
//   // Do something with the current node and return it
//   return currentNode
// })
export default Vue.extend({
  props: {
    tag: {
      type: String,
      default: 'div',
    },
    html: {
      type: String,
      default: '',
    },
    previewPic: {
      type: Boolean,
      default: true,
    },
    hooks: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    dealHtml (): string {
      const sanitizeHtml = DOMPurify.sanitize(this.html)
      return sanitizeHtml
    },
  },
  mounted () {
    if (this.previewPic) {
      this.$el.addEventListener('click', this.onImagePreview, false)
    }
  },
  beforeDestroy () {
    if (this.previewPic) {
      this.$el.removeEventListener('click', this.onImagePreview, false)
    }
  },
  created () {
    Object.keys(this.hooks).forEach(hookName => {
      DOMPurify.addHook(hookName as any, preHooks[this.hooks[hookName]] || this.hooks[hookName])
    })
  },
  methods: {
    onImagePreview (e: Event) {
      let target = e.target as HTMLImageElement
      if (target!.nodeName === 'IMG') {
        e.stopPropagation()
        e.preventDefault()
        ImagePreview([
          target.src,
        ])
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.v-html {
  /deep/ {
    img {
      max-width: 100%;
    }
    table {
      width: 100%;
      margin: 20px 0;
      td, th {
        padding: 5px 10px;
        border: 1px solid #ddd;
      }
      caption {
        border: 1px solid;
        border-bottom: 0;
        text-align: center;
        padding: 5px 10px;
      }
    }
  }
  // 字母-数字强制换行
  word-break: break-all;
  word-wrap:break-word;
}

.hide-points, .show-points {
  font-size: 30px;
  line-height: 48px;
  /deep/ span, p {
    font-size: 30px !important;
    line-height: 32px;
  }
}
.hide-points {
  /deep/ {
    .underline-innertext {
      visibility: hidden;
    }
    .underline-span {
      border-bottom: 1px solid #666;
    }
  }
}
.show-points {
  /deep/ {
    .underline-innertext {
      color: #04CABC;
      span, p {
        color: inherit !important;
      }
    }
    .underline-span {
      text-decoration: none !important;
      border: 0;
    }
  }
}
</style>
